<template>
	<view class="content">
		<view class="reportInstrument">
			<view class="reportInstrumentContent1">
				<button class="reportButton" type="info" @click="render.headelReport">导出PDF</button>
			</view>
		</view>
		<view class="report-text" id="printReport">
			<view class="title">
				食品安全抽样检验抽样单(非食用农产品)
			</view>
			<view class="sample">
				<view class="code">抽样单编号：LMXY25008</view>
				<view class="no">No</view>
			</view>
			<view class="table">
				<view class="table-tr">
					<view class="table-td width-180">任务来源</view>
					<view class="table-td width-250">龙门市场监督监管局</view>
					<view class="table-td width-120">网店商铺名称</view>
					<view class="table-td width-180">口监督抽检口风险监测口评价性抽检</view>
				</view>
				<view class="table-tr-spb">
					<view class="table-td width-70">被抽样单位信息</view>
					<view class="table-tr-flex1">
						<view class="table-dis">
							<view class="table-td width-110">单位名称</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-110">单位地址</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-110">网店商铺名称</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-110">网店地址</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-110">团经背许可证号/口生产许可证号</view>
							<view class="table-td width-150"></view>
							<view class="table-td width-240"></view>
							<view class="table-td width-180"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <table border="1" cellspacing="0" cellpadding="0" align="center">
				<tbody>
					<tr>
						<td>团经背许可证号/口生产许可证号</td>
						<td></td>
						<td>营业执照号/统一社会信用代码</td>
						<td colspan="3"></td>
					</tr>
					<tr>
						<td>法定代表人(负责人)</td>
						<td></td>
						<td>联系入 </td>
						<td></td>
						<td>联系电话</td>
						<td>1388888888</td>
					</tr>
					<tr>
						<td>(标示)样品信息</td>
					</tr>
					<tr>
						<td>样品名称</td>
						<td></td>
						<td>商标</td>
						<td></td>
					</tr>
					<tr>
						<td>口千产日期 口购进日期商标口加工日期口消毒日期口其他日期()</td>
						<td></td>
						<td>规格型号</td>
						<td></td>
					</tr>
					<tr>
						<td>样品批号</td>
						<td></td>
						<td>保质期</td>
						<td></td>
					</tr>
					<tr>
						<td>执行标准/技术文件</td>
						<td></td>
						<td>质量等级</td>
						<td></td>
					</tr>
					<tr>
						<td>抽样数量(含备样)</td>
						<td></td>
						<td>备样数量</td>
						<td></td>
						<td>网络订单偏号</td>
						<td></td>
					</tr>
					<tr>
						<td>抽样方式</td>
						<td>囗无菌抽样囗非无菌抽样</td>
						<td>单价</td>
						<td></td>
					</tr>
					<tr>
						<td>储存条件</td>
						<td>口常温口冷藏口冷冻口避光口其他</td>
						<td>是否进口</td>
						<td>口是口否</td>
						<td>原产地</td>
						<td></td>
					</tr>
					<tr>
						<td>保健食品功能类别</td>
						<td></td>
						<td>口特殊食品注册号口保健食品批准文号</td>
						<td></td>
					</tr>
					<tr>
						<td>生产者名称</td>
						<td></td>
					</tr>
					<tr>
						<td>生产者地址</td>
						<td></td>
					</tr>
					<tr>
						<td>生产许可证号</td>
						<td></td>
						<td>联系电话</td>
						<td></td>
					</tr>
					<tr>
						<td>是否存在第三方企业</td>
						<td>口是口否</td>
						<td>第三方企业性质</td>
						<td>口委托口代理口经销口进口口其他( )</td>
					</tr>
					<tr>
						<td>第三方企业名称</td>
						<td></td>
					</tr>
					<tr>
						<td>第三方企业地址</td>
						<td></td>
						<td>联系电话</td>
						<td></td>
					</tr>
					<tr>
						<td>网络交易平台经营者信息</td>
					</tr>
					<tr>
						<td>平台名称</td>
						<td></td>
					</tr>
					<tr>
						<td>平台网址</td>
						<td></td>
						<td>营业执照号/统一社会信用代码</td>
						<td></td>
					</tr>
					<tr>
						<td>平台地址</td>
						<td></td>
					</tr>
					<tr>
						<td>抽样单位信息</td>
					</tr>
					<tr>
						<td>单位名称</td>
						<td>广州汇标检测技术中心</td>
						<td>地址</td>
						<td>广州市黄埔区龙湖街道飞园鹏飞街1号、3号、5号</td>
					</tr>
					<tr>
						<td>联系人</td>
						<td>电话</td>
						<td>020-34301783</td>
						<td>传真</td>
						<td>020-85283745</td>
					</tr>
					<tr>
						<td>备注</td>
						<td></td>
					</tr>
					<tr>
						<td>被抽样单位益章(签名):</td>
						<td> 年 月 日</td>
						<td>
							抽样人员(签名):
							抽样单位(盖章):
						</td>
						<td> 年 月 日</td>
						<td>
							监管人员(签名):
						</td>
						<td> 年 月 日</td>
					</tr>
				</tbody>
			</table> -->
			<view>由承检机构抽样的，本文书一式两联，第一联交承机构；第二联交被抽样单位。</view>
		</view>
	</view>
</template>

<script>
	import {
		base64ToPath
	} from '@/utils/imageTools.js';
	/**  
	 * base64字符串转成文件
	 * @param {String} base64Str // 允许包含前缀
	 * @param {String} fileName // 文件名称：1663061363470.xlsx
	 * @param {Object} callback  // 返回本地路径径URL，file:///xxx/doc/1663062980631.pdf
	 */
	function base64ToFile(base64Str, fileName, callback) {
		// 去除base64前缀

		// var index = base64Str.indexOf(',')
		// var base64Str = base64Str.slice(index + 1, base64Str.length)
		// console.log(base64Str)
		const imageStr = base64Str;
		plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
			fs.root.getFile(fileName, {
				create: true
			}, function(entry) {
				// 获得本地路径URL，file:///xxx/doc/1663062980631.pdf
				var fullPath = entry.fullPath;
				// console.log("获得本地路径URL",fullPath)
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'android') {
					base64ToPath(imageStr)
						.then(path => {
							console.log(path, 'path')
							saveImage(path);
						})
						.catch(error => {
							console.error('临时路径转换出错了：', error);
						});
					// var Base64 = plus.android.importClass("android.util.Base64");
					// var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
					// try {
					// 	// console.log("base64Str: ", base64Str);
					// 	var out = new FileOutputStream(fullPath);
					// 	// 此处Base64.decode有长度限制，如果不能满足需求，可以考虑换成官方原生插件市场的【Base64转文件】
					// 	var bytes = Base64.decode(base64Str, Base64.DEFAULT);
					// 	// console.log("bytes: ", bytes);
					// 	if (!bytes) {
					// 		uni.hideLoading()
					// 		plus.nativeUI.toast("页面元素过多，超出生成限制，生成失败");
					// 		return false
					// 	} else {
					// 		out.write(bytes);
					// 		out.close();
					// 		// 回调  
					// 		callback && callback(entry.toLocalURL());
					// 	}
					// } catch (e) {
					// 	console.log(e.message);
					// }
				} else if (platform == 'ios') {
					var NSData = plus.ios.importClass('NSData');
					var nsData = new NSData();
					nsData = nsData.initWithBase64EncodedStringoptions(base64Str, 0);
					if (nsData) {
						nsData.plusCallMethod({
							writeToFile: fullPath,
							atomically: true
						});
						plus.ios.deleteObject(nsData);
					}
					// 回调  
					callback && callback(entry.toLocalURL());
				}
			})
		})
	}

	function saveImage(url) {
		uni.hideLoading()
		uni.saveFile({
			tempFilePath: url,
			async success(res) {
				uni.openDocument({
					filePath: res.savedFilePath,
					success: function(FileRes) {
						console.log('打开成功');
					}
				});
			},
			complete(res) {
				console.log(res, 'res123')
			}
		})
	}

	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			savePDF(base64) {
				uni.showLoading({
					title: '导出中'
				});
				var fileName = (new Date()).valueOf() + '.pdf';
				base64ToFile(base64, fileName, function(path) {
					// console.log('result', path);
					// uni.hideLoading()
					// uni.showModal({
					// 	title: '导出成功',
					// 	content: '文件地址:' + path +
					// 		'\n 是否打开？',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 			plus.runtime.openFile(path); //用第三方程序打开文件
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
				})
			}

		}
	}
</script>

<script module="render" lang="renderjs">
	import html2Canvas from 'html2canvas'
	import JsPDF from 'jspdf'
	export default {
		data() {
			return {

			}
		},
		mounted() {},
		methods: {
			headelReport(e, ownerVm) {
				html2Canvas(document.querySelector('#printReport'), {
					allowTaint: false, //允许污染
					taintTest: true, //在渲染前测试图片(没整明白有啥用)
					useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
				}).then(function(canvas) {
					// let contentWidth = canvas.width
					// let contentHeight = canvas.height
					// //一页pdf显示html页面生成的canvas高度;
					// let pageHeight = contentWidth / 592.28 * 841.89
					// //生成pdf的html页面高度
					// let leftHeight = contentHeight
					// //页面偏移
					// let position = 0
					// //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					// let imgWidth = 595.28
					// let imgHeight = 592.28 / contentWidth * contentHeight
					// // canvas.crossOrigin="anonymous";
					// let pageData = canvas.toDataURL('image/jpeg', 1);
					// let PDF = new JsPDF('', 'pt', 'a4')
					// // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					// // 当内容未超过pdf一页显示的范围，无需分页
					// if (leftHeight < pageHeight) {
					// 	PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
					// } else {
					// 	while (leftHeight > 0) {
					// 		PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
					// 		leftHeight -= pageHeight
					// 		position -= 841.89
					// 		if (leftHeight > 0) {
					// 			//避免添加空白页
					// 			PDF.addPage()
					// 		}
					// 	}
					// }

					// let contentWidth = canvas.width;
					// let contentHeight = canvas.height;

					// // A4 页面尺寸
					let imgWidth = 595.28;
					let imgHeight = 841.89;
					// let imgHeight = 592.28 / contentWidth * contentHeight;

					// 将画布转换为图片
					let pageData = canvas.toDataURL('image/jpeg', 1);
					
					var img = new Image();
					img.src = pageData;
					
					img.style.transform = 'scale(0.1)';

					// // 创建 PDF 实例
					let PDF = new JsPDF('', 'pt', 'a4');

					// // 直接将图像添加到 PDF 中，无需分页
					PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
					

					var _this = this
					plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'], function(e) {
						if (e.deniedAlways.length > 0) { //权限被永久拒绝
							// 弹出提示框解释为何需要读写手机储存权限，引导用户打开设置页面开启
							uni.showModal({
								title: '存储权限',
								content: '您拒绝了存储权限，请去设置-应用开启存储权限。',
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
									} else if (res.cancel) {
										// console.log('用户点击取消');
									}
								}
							});
						}
						if (e.deniedPresent.length > 0) { //权限被临时拒绝
							// 弹出提示框解释为何需要读写手机储存权限，可再次调用plus.android.requestPermissions申请权限
							plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'])
							// console.log('666666666 ' + e.deniedPresent.toString());
						}
						if (e.granted.length > 0) { //权限被允许
							//调用依赖获取读写手机储存权限的代码
							let base64Str = PDF.output('dataurlstring');
							// console.log("base64Str: ", base64Str);
							ownerVm.callMethod('savePDF', base64Str)
						}
					}, function(e) {
						// console.log('R12133313221' + JSON.stringify(e));
					});
				})
			}
		}
	};
</script>
<style lang="scss">
	// .content {
	//     transform: scale(0.8); /* 缩小到80% */
	//     transform-origin: top left; /* 确保缩放是从左上角开始 */
	// }
	.report-text{
		text-align: center;
		font-size: 20rpx;
		padding: 0 10rpx;
		.title{
			font-size: 40rpx;
			font-weight: 500;
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}
		.sample{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			.code{
				margin-left: 40rpx;
			}
			.no{
				margin-right: 200rpx;
			}
		}
		.table{
			width: 100%;
			border-top: 1rpx solid #000;
			border-left: 1rpx solid #000;
			.table-tr{
				display: flex;
			}
			.table-tr-spb{
				display: flex;
				justify-content: space-between;
				.table-tr-flex1{
					flex: 1;
					// display: flex;
				}
			}
		}
	}
	.table-dis{
		display: flex;
	}
	.table-td{
		display: grid;
		place-items: center; /* 同时垂直和水平居中 */
		border-right: 1rpx solid #000;
		border-bottom: 1rpx solid #000;
	}
	.width-50{
		width: 50rpx;
	}
	.width-60{
		width: 60rpx;
	}
	.width-70{
		width: 80rpx;
	}
	.width-80{
		width: 80rpx;
	}
	.width-90{
		width: 90rpx;
	}
	.width-99{
		width: 99rpx;
	}
	.width-100{
		width: 100rpx;
	}
	.width-110{
		width: 110rpx;
	}
	.width-120{
		width: 120rpx;
	}
	.width-130{
		width: 130rpx;
	}
	.width-140{
		width: 140rpx;
	}
	.width-150{
		width: 150rpx;
	}
	.width-180{
		width: 180rpx;
	}
	.width-190{
		width: 190rpx;
	}
	.width-210{
		width: 210rpx;
	}
	.width-240{
		width: 240rpx;
	}
	.width-250{
		width: 250rpx;
	}
	.width-500{
		width: 500rpx;
	}
	.width-550{
		width: 553rpx;
	}
</style>